<div class="bs-docs-section" ng-controller="ModalDemoCtrl">

  <div class="page-header">
    <h1 id="modals">Modals <a class="small" href="//github.com/mgcrea/angular-strap/blob/master/src/modal/modal.js" target="_blank">modal.js</a>
    </h1>
    <code>mgcrea.ngStrap.modal</code>
  </div>


  <h2 id="modals-examples">Examples</h2>
  <p>Modals are streamlined, but flexible, dialog prompts with the minimum required functionality and smart defaults.</p>

  <h3>Live demo <a class="small edit-plunkr" data-module-name="mgcrea.ngStrapDocs" data-content-html-url="modal/docs/modal.demo.html"
      data-content-js-url="modal/docs/modal.demo.js" ng-plunkr data-title="edit in plunker" data-placement="right" bs-tooltip>clog.info</a></h3>
  <pre class="bs-example-scope">$scope.modal = {{modal | json}};</pre>
  <div class="bs-example" style="padding-bottom: 24px;" append-source>

    <!-- Button to trigger a default modal with a scope as an object {title:'', content:'', etc.} -->
    <button type="button" class="btn btn-lg btn-primary" data-animation="am-fade-and-scale" data-placement="center" bs-modal="modal">Click to toggle modal
      <br />
      <small>(using an object)</small>
    </button>

    <!-- You can use a custom html template with the `data-template` attr -->
    <button type="button" class="btn btn-lg btn-danger" data-animation="am-fade-and-slide-top" data-template-url="modal/docs/modal.demo.tpl.html"
      bs-modal="modal">Custom Modal
      <br />
      <small>(using data-template)</small>
    </button>

    <!-- You can use a custom html template with the `data-template` attr -->
    <button type="button" class="btn btn-lg btn-danger" ng-click="showModal()">Modal
      <br />
      <small>(using service)</small>
    </button>


  </div>

  <h3>508 Usage</h3>
  <p>
    For modal dialogs to be 508 and screen reader compliant please use the following examples. The <code>backdrop</code>    must be set to <em>static</em> and
    <code>keyboard</code> must be set to a truthy value. Please be aware that the directive use-case handles returning focus
    to the item which opens the modal dialog. In scenarios where the <code>$modal</code> service is used it will be up to
    the implementation to return focus to the element which initiated the action to open the dialog.
  </p>
  <div class="bs-example" style="padding-bottom: 24px;" append-source>
    <button type="button" class="btn btn-primary" data-template-url="modal/docs/modal.demo.tpl.html" bs-modal="modal" keyboard="true"
      backdrop="static">
      Custom 508 Modal
    </button>
  </div>

  <div class="callout callout-info">
    <h4>Backdrop animation</h4>
    <p>Backdrop animation being powered by <code>ngAnimate</code>, it requires custom CSS.</p>
    <pre class="bs-exemple-code">
      <code class="css" highlight-block>
        .modal-backdrop.am-fade {
          opacity: .5;
          transition: opacity .15s linear;
          &.ng-enter {
            opacity: 0;
            &.ng-enter-active {
              opacity: .5;
            }
          }
          &.ng-leave {
            opacity: .5;
            &.ng-leave-active {
              opacity: 0;
            }
          }
        }
      </code>
    </pre>
  </div>

  <h2 id="modals-usage">Usage</h2>
  <p>Append a <code>bs-modal</code>attribute to any element to activate the directive.</p>
  <div class="callout callout-info">
    <h4>The module also exposes a <code>$modal</code>service</h4>
    <p>Available for programmatic use (inside a directive/controller).</p>
    <div class="highlight">
      <pre>
        <code class="javascript" highlight-block>
          angular.module('myApp')
          .controller('DemoCtrl', function($scope, $modal) {
            // Show a basic modal from a controller
            var myModal = $modal({title: 'My Title', content: 'My Content', show: true});

            // Pre-fetch an external template populated with a custom scope
            var myOtherModal = $modal({scope: $scope, template: 'modal/docs/modal.demo.tpl.html', show: false});
            // Show when some event occurs (use $promise property to ensure the template has been loaded)
            $scope.showModal = function() {
              myOtherModal.$promise.then(myOtherModal.show);
            };
          })
        </code>
      </pre>
    </div>
  </div>


  <h3>Options</h3>
  <p>Options can be passed via data-attributes on the directive or as an object hash to configure the service. For data attributes,
    append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
  <p>For directives, you can naturally inherit the contextual <code>$scope</code> or leverage a custom one with an <a href="http://docs.angularjs.org/guide/expression">AngularJS expression</a>    to evaluate as an object directly on the <code>bs-modal</code> attribute</p>
  <div class="table-responsive">
    <table class="table table-bordered table-striped">
      <thead>
        <tr>
          <th style="width: 100px;">Name</th>
          <th style="width: 50px;">type</th>
          <th style="width: 50px;">default</th>
          <th>description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>animation</td>
          <td>string</td>
          <td>am-fade</td>
          <td>apply a CSS animation powered by ngAnimate</td>
        </tr>
        <tr>
          <td>backdropAnimation</td>
          <td>string</td>
          <td>am-fade</td>
          <td>apply a CSS animation to backdrop powered by ngAnimate</td>
        </tr>
        <tr>
          <td>placement</td>
          <td>string</td>
          <td>'top'</td>
          <td>how to position the modal - top | bottom | center <small>(requires custom CSS)</small>.</td>
        </tr>
        <tr>
          <td>title</td>
          <td>string</td>
          <td>''</td>
          <td>default title value if <code>title</code>attribute isn't present</td>
        </tr>
        <tr>
          <td>content</td>
          <td>string</td>
          <td>''</td>
          <td>default content value if <code>data-content</code>attribute isn't present</td>
        </tr>
        <tr>
          <td>html</td>
          <td>boolean</td>
          <td>false</td>
          <td>replace <code>ng-bind</code> with <code>ng-bind-html</code>, requires <code>ngSanitize</code> to be loaded</td>
        </tr>
        <tr>
          <td>backdrop</td>
          <td>boolean or the string <code>'static'</code>
          </td>
          <td>true</td>
          <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code>for a backdrop which doesn't close
            the modal on click.</td>
        </tr>
        <tr>
          <td>keyboard</td>
          <td>boolean</td>
          <td>true</td>
          <td>Closes the modal when escape key is pressed</td>
        </tr>
        <tr>
          <td>show</td>
          <td>boolean</td>
          <td>true</td>
          <td>Shows the modal when initialized.</td>
        </tr>
        <tr>
          <td>container</td>
          <td>string | false</td>
          <td>false</td>
          <td>
            <p>Appends the popover to a specific element. Example: <code>container: 'body'</code>. This option is particularly
              useful in that it allows you to position the popover in the flow of the document near the triggering element
              -&nbsp;which will prevent the popover from floating away from the triggering element during a window resize.</p>
          </td>
        </tr>
        <tr>
          <td>controller</td>
          <td>string|function</td>
          <td>false</td>
          <td>
            <p>Controller fn that should be associated with newly created scope or the name of a registered controller if passed
              as a string.</p>
          </td>
        </tr>
        <tr>
          <td>controllerAs</td>
          <td>string</td>
          <td>false</td>
          <td>
            <p>A controller alias name. If present the controller will be published to scope under the `controllerAs` name.</p>
          </td>
        </tr>
        <tr>
          <td>resolve</td>
          <td>object</td>
          <td>false</td>
          <td>
            <p>Object containing dependencies that will be injected into the controller's constructor when all the dependencies
              have resolved. The controller won't load if the promise is rejected.</p>
          </td>
        </tr>
        <tr>
          <td>locals</td>
          <td>object</td>
          <td>false</td>
          <td>
            <p>Object containing dependencies that will be injected into the controller's constructor. Similar to resolve but
              expects literal values instead of promises.</p>
          </td>
        </tr>
        <tr>
          <td>template</td>
          <td>string</td>
          <td>''</td>
          <td>
            <p>Provide an html template as a string (when templateUrl is falsy).</p>
          </td>
        </tr>
        <tr>
          <td>templateUrl</td>
          <td>path</td>
          <td>'modal/modal.tpl.html'</td>
          <td>
            <p>If provided, overrides the default template, can be either a remote URL or a cached template id.</p>
            <p>It should be a <code>div.modal</code> element following Bootstrap styles conventions (<a href="//github.com/mgcrea/angular-strap/blob/master/src/modal/modal.tpl.html"
                target="_blank">like this</a>).</p>
          </td>
        </tr>
        <tr>
          <td>contentTemplate</td>
          <td>path</td>
          <td>false</td>
          <td>
            <p>If provided, fetches the partial and includes it as the inner content, can be either a remote URL or a cached
              template id.</p>
          </td>
        </tr>
        <tr>
          <td>prefixEvent</td>
          <td>string</td>
          <td>'modal'</td>
          <td>
            <p>If provided, prefixes the events '.hide.before' '.hide' '.show.before' and '.show' with the passed in value.
              With the default value these events are 'modal.hide.before' 'modal.hide' 'modal.show.before' and 'modal.show'</p>
          </td>
        </tr>
        <tr>
          <td>id</td>
          <td>string</td>
          <td>''</td>
          <td>
            The modal instance id for usage in event handlers.
          </td>
        </tr>
        <tr>
          <td>onShow</td>
          <td>function</td>
          <td></td>
          <td>
            <p>If provided, this function will be invoked after the modal is shown.</p>
          </td>
        </tr>
        <tr>
          <td>onBeforeShow</td>
          <td>function</td>
          <td></td>
          <td>
            <p>If provided, this function will be invoked before the modal is shown.</p>
          </td>
        </tr>
        <tr>
          <td>onHide</td>
          <td>function</td>
          <td></td>
          <td>
            <p>If provided, this function will be invoked after the modal is hidden.</p>
          </td>
        </tr>
        <tr>
          <td>onBeforeHide</td>
          <td>function</td>
          <td></td>
          <td>
            <p>If provided, this function will be invoked before the modal is hidden.</p>
          </td>
        </tr>
        <tr>
          <td>zIndex</td>
          <td>number</td>
          <td>1050</td>
          <td>
            CSS z-index value for the modal.
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="callout callout-info">
    <h4>Default options</h4>
    <p>You can override global defaults for the plugin with <code>$modalProvider.defaults</code></p>
    <div class="highlight">
      <pre class="bs-exemple-code">
        <code class="javascript" highlight-block>
          angular.module('myApp')
          .config(function($modalProvider) {
            angular.extend($modalProvider.defaults, {
              animation: 'am-flip-x'
            });
          })
        </code>
      </pre>
    </div>
  </div>

  <h3>Scope methods</h3>
  <p>Methods available inside the directive scope to toggle visibility.</p>

  <h4>$show()</h4>
  <p>Reveals the modal.</p>

  <h4>$hide()</h4>
  <p>Hides the modal.</p>

  <h4>$toggle()</h4>
  <p>Toggles the modal.</p>

</div>